<template>
  <div class="employmentclassdetail" id="class-page-index">
    <header class="directory2">
      <div class="header clearfix">
        <div class="page-title clearfix">
          <a href="//m.imooc.com" class="imwap-icon-imooc"></a>
          <div class="page-title-name js-page-name">
            <span>就业班</span>
            <i class="imwap-arrow_d"></i>
          </div>
        </div>

        <div class="drawer-box js-drawer-more">
          <i class="imwap-more_vert"></i>
          <div class="drawer-content js-drawer-content">
            <p class="line-row"></p>
            <a class="drawer-item" href="//m.imooc.com">
              <i class="imwap-center"></i>回到首页
            </a>
            <a class="drawer-item" href="//www.imooc.com/m/web/user/usercenter.html">
              <i class="imwap-peaple"></i>个人中心
            </a>
            <a class="drawer-item" href="//m.imooc.com/feedback">
              <i class="imwap-comment"></i>反馈问题
            </a>
            
            <a class="drawer-item" href="//m.imooc.com/passport/user/logout?referer=//m.imooc.com">
              <i class="imwap-out"></i>安全退出
            </a>
          </div>
        </div>

        <a class="imwap-share header-share js-share" href="javascript:void(0);"></a>
      </div>

      <div class="page-tab-wrap">
        <div class="page-tab-list">
          <a href="//m.imooc.com" class="page-tab-item">首页</a>
          <a href="//m.imooc.com/course/list" class="page-tab-item">课程</a>
          <a href="//coding.m.imooc.com" class="page-tab-item">实战</a>
          <a href="//class.m.imooc.com" class="page-tab-item active">就业班</a>
          <a href="//m.imooc.com/article" class="page-tab-item">手记</a>
          <a href="//m.imooc.com/read" class="page-tab-item">专栏</a>
          <a href="//m.imooc.com/wenda" class="page-tab-item">猿问</a>
          <a href="//job.m.imooc.com" class="page-tab-item">猿聘</a>
        </div>
      </div>
    </header>
    <div id="wrapper">
      <div id="middle" class="container">
        <div id="class-page-index">
          <div class="page-header-nav show">
            <a href="javascript:;" class="nav-item on" data-tar="pageTop">详情</a>
            <a href="javascript:;" class="nav-item" data-tar="plan-type-list">课程</a>
          </div>

          <div class="course-pic-list">
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5c0dfc710001da5a07500686.jpg"
              src="http://img.mukewang.com/climg/5c0dfc710001da5a07500686.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5c05f3280001e4a207501296.jpg"
              src="http://img.mukewang.com/climg/5c05f3280001e4a207501296.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5bf649fa000113bf07501644.jpg"
              src="http://img.mukewang.com/climg/5bf649fa000113bf07501644.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5bf64a0100017a0707501608.jpg"
              src="http://img.mukewang.com/climg/5bf64a0100017a0707501608.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5bf649fd0001140307501776.jpg"
              src="http://img.mukewang.com/climg/5bf649fd0001140307501776.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5bf649fe00010adc07501860.jpg"
              src="http://img.mukewang.com/climg/5bf649fe00010adc07501860.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5bf64a00000165fd07501430.jpg"
              src="http://img.mukewang.com/climg/5bf64a00000165fd07501430.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5bf64a040001148807500848.jpg"
              src="http://img.mukewang.com/climg/5bf64a040001148807500848.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5bf64a0500017aab07500856.jpg"
              src="http://img.mukewang.com/climg/5bf64a0500017aab07500856.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5bf64a08000107ac07501442.jpg"
              src="http://img.mukewang.com/climg/5bf64a08000107ac07501442.jpg"
              style="display: block;"
            >
            
            <img
              class="lazy-img"
              data-original="http://img.mukewang.com/climg/5c049b1300018efa07500208.jpg"
              src="http://img.mukewang.com/climg/5c049b1300018efa07500208.jpg"
              style="display: block;"
            >
          </div>

          <div class="plan-type-list" id="courseList">
            <div class="line-column"></div>

            <div class="plan-type-item" data-id="20" data-price="568.00">
              <div class="step-tip">阶段一</div>
              <a href="javascript:;" class="clearfix">
                <div
                  class="plan-item-banner l"
                  style="background: url(//img.mukewang.com/climg/59030cc50001144806000338.jpg) center no-repeat;"
                >
                  <div
                    class="play-btn js-plan-btn"
                    data-src="http://v3.mukewang.com/jiuyeban/5af28cc0e520e5971c8b4771/H.mp4"
                  >
                    <i class="imwap-play_arrow"></i>
                  </div>
                </div>
                <div class="plan-item-box l">
                  <p class="plan-item-name">前端零基础入门</p>
                  <div class="plan-item-center">5步骤 · 32门课 · 46小时</div>
                  <div class="plan-item-bottom clearfix">
                    <span class="l">7313在学 ·</span>
                    <span class="plan-item-price l">&nbsp;1269评价</span>
                  </div>
                  <div class="plan-item-comment clearfix">
                    <span class="item-price">¥568.00</span>
                    <div class="comment-wrap">
                      <div class="comment-star">
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                      </div>
                      <div class="comment-score">9.84分</div>
                    </div>
                    <div class="item-details" onclick="window.location.href='/referral?cid=20'">
                      详情
                      <i class="imwap-arrow_r"></i>
                    </div>
                  </div>
                  <!-- <span class="play-btn js-plan-btn" data-src="http://v3.mukewang.com/jiuyeban/5af28cc0e520e5971c8b4771/H.mp4"></span> -->
                </div>
              </a>
            </div>

            <div class="plan-type-item" data-id="25" data-price="658.00">
              <div class="step-tip">阶段二</div>
              <a href="javascript:;" class="clearfix">
                <div
                  class="plan-item-banner l"
                  style="background: url(//img.mukewang.com/climg/5915802b0001da6206000338.jpg) center no-repeat;"
                >
                  <div
                    class="play-btn js-plan-btn"
                    data-src="http://v3.mukewang.com/jiuyeban/5af28c71e520e5751c8b47b2/H.mp4"
                  >
                    <i class="imwap-play_arrow"></i>
                  </div>
                </div>
                <div class="plan-item-box l">
                  <p class="plan-item-name">响应式开发与常用框架</p>
                  <div class="plan-item-center">5步骤 · 30门课 · 38小时</div>
                  <div class="plan-item-bottom clearfix">
                    <span class="l">2357在学 ·</span>
                    <span class="plan-item-price l">&nbsp;118评价</span>
                  </div>
                  <div class="plan-item-comment clearfix">
                    <span class="item-price">¥658.00</span>
                    <div class="comment-wrap">
                      <div class="comment-star">
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                      </div>
                      <div class="comment-score">9.37分</div>
                    </div>
                    <div class="item-details" onclick="window.location.href='/referral?cid=25'">
                      详情
                      <i class="imwap-arrow_r"></i>
                    </div>
                  </div>
                  <!-- <span class="play-btn js-plan-btn" data-src="http://v3.mukewang.com/jiuyeban/5af28c71e520e5751c8b47b2/H.mp4"></span> -->
                </div>
              </a>
            </div>

            <div class="plan-type-item" data-id="34" data-price="758.00">
              <div class="step-tip">阶段三</div>
              <a href="javascript:;" class="clearfix">
                <div
                  class="plan-item-banner l"
                  style="background: url(//img.mukewang.com/climg/5a31dcf400012df306000338.jpg) center no-repeat;"
                >
                  <div
                    class="play-btn js-plan-btn"
                    data-src="http://v3.mukewang.com/jiuyeban/5af2737de420e5a0728b471b/H.mp4"
                  >
                    <i class="imwap-play_arrow"></i>
                  </div>
                </div>
                <div class="plan-item-box l">
                  <p class="plan-item-name">组件化思想开发电商网页</p>
                  <div class="plan-item-center">4步骤 · 31门课 · 61小时</div>
                  <div class="plan-item-bottom clearfix">
                    <span class="l">1667在学 ·</span>
                    <span class="plan-item-price l">&nbsp;25评价</span>
                  </div>
                  <div class="plan-item-comment clearfix">
                    <span class="item-price">¥758.00</span>
                    <div class="comment-wrap">
                      <div class="comment-star">
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                      </div>
                      <div class="comment-score">9.73分</div>
                    </div>
                    <div class="item-details" onclick="window.location.href='/referral?cid=34'">
                      详情
                      <i class="imwap-arrow_r"></i>
                    </div>
                  </div>
                  <!-- <span class="play-btn js-plan-btn" data-src="http://v3.mukewang.com/jiuyeban/5af2737de420e5a0728b471b/H.mp4"></span> -->
                </div>
              </a>
            </div>

            <div class="plan-type-item" data-id="42" data-price="688.00">
              <div class="step-tip">阶段四</div>
              <a href="javascript:;" class="clearfix">
                <div
                  class="plan-item-banner l"
                  style="background: url(//img.mukewang.com/climg/5b0fba850001cdce06000338.jpg) center no-repeat;"
                >
                  <div
                    class="play-btn js-plan-btn"
                    data-src="http://v3.mukewang.com/jiuyeban/5b0fa866e520e502098b4575/H.mp4"
                  >
                    <i class="imwap-play_arrow"></i>
                  </div>
                </div>
                <div class="plan-item-box l">
                  <p class="plan-item-name">热门框架Vue开发WebApp</p>
                  <div class="plan-item-center">4步骤 · 17门课 · 32小时</div>
                  <div class="plan-item-bottom clearfix">
                    <span class="l">1108在学 ·</span>
                    <span class="plan-item-price l">&nbsp;16评价</span>
                  </div>
                  <div class="plan-item-comment clearfix">
                    <span class="item-price">¥688.00</span>
                    <div class="comment-wrap">
                      <div class="comment-star">
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                        <i class="imwap-star-choose on"></i>
                      </div>
                      <div class="comment-score">9.17分</div>
                    </div>
                    <div class="item-details" onclick="window.location.href='/referral?cid=42'">
                      详情
                      <i class="imwap-arrow_r"></i>
                    </div>
                  </div>
                  <!-- <span class="play-btn js-plan-btn" data-src="http://v3.mukewang.com/jiuyeban/5b0fa866e520e502098b4575/H.mp4"></span> -->
                </div>
              </a>
            </div>
          </div>

          <div class="plan-final">
            <div class="line-column"></div>
            <div class="plan-final-tit">
              <img src="https://class.m.imooc.com/static/classwap/static/img/index/flag.png">
              <p>完成学习可胜任以下岗位</p>
            </div>

            <dl class="plan-final-list clearfix">
              <dd>
                <i class="imwap-check"></i>前端工程师
              </dd>

              <dd>
                <i class="imwap-check"></i>网站重构工程师
              </dd>

              <dd>
                <i class="imwap-check"></i>网页制作工程师
              </dd>

              <dd>
                <i class="imwap-check"></i>H5开发工程师
              </dd>

              <dd>
                <i class="imwap-check"></i>移动端开发工程师
              </dd>
            </dl>
            <p class="plan-final-desc">
              掌握less、vue、bootstrap等流行框架的实际运用，能够独立完成前端网页项目的开发。
              将能胜任月薪
              <span
                style="color: #9447EB"
              >8,000RMB--15,000RMB</span>的职位
            </p>
          </div>

          <div class="footer-container clearfix">
            <div class="step-select">
              <div class="plan-type-item js-default-select on" data-id="20" data-price="568.00">
                <i class="imv2-check_c"></i>

                <div class="step-title js-select-course">阶段 1</div>
              </div>

              <div class="plan-type-item js-default-select on" data-id="25" data-price="658.00">
                <i class="imv2-check_c"></i>

                <div class="step-title js-select-course">阶段 2</div>
              </div>

              <div class="plan-type-item js-default-select on" data-id="34" data-price="758.00">
                <i class="imv2-check_c"></i>

                <div class="step-title js-select-course">阶段 3</div>
              </div>

              <div class="plan-type-item js-default-select on" data-id="42" data-price="688.00">
                <i class="imv2-check_c"></i>

                <div class="step-title js-select-course">阶段 4</div>
              </div>
            </div>

            <a href="//m.imooc.com/confirmorder?type=7&amp;cids=441" class="buy-btn r js-buy">
              <div class="price-box">
                <p class="select-total-price">
                  ¥2199.00
                  <span class="select-reduce-price hide">组合套餐立减473.00</span>
                </p>
                <p class="bottom-tips">
                  <span class="package-normal-price hide" style="display: inline;">原价2672.00</span>
                </p>
              </div>
              <p class="buy-text">立即购买</p>
            </a>

            <div class="discount-tip" style="display: block;">购买4个阶段享受套餐优惠</div>
          </div>
          <div class="footer-package-list clearfix hide">
            <div class="package-text">组合购买
              <br>实惠更多
            </div>
            <div class="package-list" id="package_list">
              <div class="package-item">
                <p>套餐一</p>
                <p>立省￥473.00</p>
              </div>
              <div class="package-item">
                <p>套餐二</p>
                <p>立省￥305.00</p>
              </div>
            </div>
          </div>
          <div class="package-list-layer hide">
            <div class="footer-list-detail">
              <div class="footer-head clearfix">
                <p>组合购买 实惠更多</p>
                <span class="close-icon js-close-layer">×</span>
              </div>
              <div class="package-plan-list" id="package_plan_list">
                <div
                  class="package-plan-item"
                  data-id="441"
                  data-sale="2199.00"
                  data-normal="2672.00"
                  data-reduce="473.00"
                >
                  <p>
                    <label class="select-label js-select-package">
                      <i class="imwap-radiobutton_o"></i>套餐一
                    </label>
                    <span>已优惠的组合套餐不接受换课和退课，请购买前知晓</span>
                  </p>
                  <div class="package-plan-list">
                    <a href="/referral?cid=20" class="clearfix">
                      <img src="//img.mukewang.com/climg/59030cc50001144806000338.jpg">
                      <p>前端零基础入门</p>
                    </a>
                    <i class="add-icon">+</i>
                    <a href="/referral?cid=25" class="clearfix">
                      <img src="//img.mukewang.com/climg/5915802b0001da6206000338.jpg">
                      <p>响应式开发与常用框架</p>
                    </a>
                    <i class="add-icon">+</i>
                    <a href="/referral?cid=34" class="clearfix">
                      <img src="//img.mukewang.com/climg/5a31dcf400012df306000338.jpg">
                      <p>组件化思想开发电商网页</p>
                    </a>
                    <i class="add-icon">+</i>
                    <a href="/referral?cid=42" class="clearfix">
                      <img src="//img.mukewang.com/climg/5b0fba850001cdce06000338.jpg">
                      <p>热门框架Vue开发WebApp</p>
                    </a>
                    <div class="package-price">
                      <p>套餐价格</p>
                      <p class="sale-price">￥2199.00</p>
                      <p class="normal-price">￥2672.00</p>
                      <p class="reduce-price">立省￥473.00</p>
                    </div>
                  </div>
                </div>
                <div
                  class="package-plan-item"
                  data-id="442"
                  data-sale="1799.00"
                  data-normal="2104.00"
                  data-reduce="305.00"
                >
                  <p>
                    <label class="select-label js-select-package">
                      <i class="imwap-radiobutton_o"></i>套餐二
                    </label>
                    <span>已优惠的组合套餐不接受换课和退课，请购买前知晓</span>
                  </p>
                  <div class="package-plan-list">
                    <a href="/referral?cid=25" class="clearfix">
                      <img src="//img.mukewang.com/climg/5915802b0001da6206000338.jpg">
                      <p>响应式开发与常用框架</p>
                    </a>
                    <i class="add-icon">+</i>
                    <a href="/referral?cid=34" class="clearfix">
                      <img src="//img.mukewang.com/climg/5a31dcf400012df306000338.jpg">
                      <p>组件化思想开发电商网页</p>
                    </a>
                    <i class="add-icon">+</i>
                    <a href="/referral?cid=42" class="clearfix">
                      <img src="//img.mukewang.com/climg/5b0fba850001cdce06000338.jpg">
                      <p>热门框架Vue开发WebApp</p>
                    </a>
                    <div class="package-price">
                      <p>套餐价格</p>
                      <p class="sale-price">￥1799.00</p>
                      <p class="normal-price">￥2104.00</p>
                      <p class="reduce-price">立省￥305.00</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "employmentclassdetail",
  props: {
    msg: String
  },
  data() {
    return {
      employmentClassList: null
    };
  },
  mounted() {
    axios
      .get("api/getEmploymentClass")
      .then(res => {
        // console.log(res)
        this.employmentClassList = res.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>
<style scoped>
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body {
  height: 100%;
  overflow: scroll;
  margin: 0rem;
  background: #f3f5f7;
}
body .header-menu {
  margin-bottom: 0;
}
body #wrapper {
  padding-bottom: 0;
}
body .w100 {
  width: 100% !important;
}
body .mengban {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body .video {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 5.33333333rem;
}
body .select-label {
  position: relative;
  cursor: pointer;
  color: #71777d;
  font-size: 0.37333333rem;
}
body .select-label i {
  position: absolute;
  top: -0.02666667rem;
  left: -0.8rem;
  font-size: 0.53333333rem;
  color: #d9dde1;
  background-color: #f3f5f7;
}
body #class-page-index .header-container {
  height: 3.94666667rem;
  width: 100%;
  background-position: center;
  background-size: cover;
  text-align: center;
  overflow: hidden;
  background-image: url(/static/classwap/static/img/index/head.png);
}
body #class-page-index .page-header-nav {
  position: fixed;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  z-index: 9;
  display: flex;
  visibility: hidden;
  opacity: 0;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  top: 1.49333333rem;
  height: 1.28rem;
}
body #class-page-index .page-header-nav.show {
  visibility: visible;
  opacity: 1;
}
body #class-page-index .page-header-nav .nav-item {
  letter-spacing: 0;
  line-height: 0.42666667rem;
  font-size: 0.37333333rem;
}
body #class-page-index .page-header-nav .nav-item:first-child {
  margin-right: 1.73333333rem;
}
body #class-page-index .page-header-nav .nav-item.on {
  color: #9447eb;
  position: relative;
}
body #class-page-index .page-header-nav .nav-item.on::before {
  content: "\e90e";
  font-family: imwap !important;
  line-height: 1;
  margin-right: 0.05333333rem;
}
body #class-page-index nav .index-banner {
  width: 100%;
  height: 3.97333333rem;
}
body #class-page-index nav .index-banner img {
  width: 100%;
  height: 100%;
}
body #class-page-index nav .nav-list {
  width: 100%;
  background: #f3f5f7;
  box-sizing: border-box;
  padding-top: 0.32rem;
  padding-left: 0.42666667rem;
  padding-right: 0.42666667rem;
}
body #class-page-index nav .nav-list .nav-item {
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 5px 0 rgba(217, 221, 225, 0.3);
  box-sizing: border-box;
  position: relative;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  padding-left: 0.42666667rem;
  padding-right: 0.42666667rem;
  margin-bottom: 0.32rem;
  height: 3.41333333rem;
  border-radius: 0.10666667rem;
}
body #class-page-index nav .nav-list .nav-item .item-info {
  width: 5.54666667rem;
  text-align: left;
}
body #class-page-index nav .nav-list .nav-item .item-info .i-title {
  font-size: 0.42666667rem;
  font-weight: 700;
  position: relative;
  color: #2b333b;
  display: inline-block;
  z-index: 1;
}
body #class-page-index nav .nav-list .nav-item .item-info .i-title::after {
  content: "";
  width: 100%;
  background: rgba(211, 189, 244, 0.5);
  position: absolute;
  left: 0;
  z-index: 0;
  height: 0.08rem;
  bottom: 0.08rem;
}
body #class-page-index nav .nav-list .nav-item .item-info .i-desc {
  font-size: 0.32rem;
  line-height: 0.42666667rem;
  padding-top: 0.06666667rem;
  padding-bottom: 0.10666667rem;
  color: #71777d;
}
body #class-page-index nav .nav-list .nav-item .item-info .i-step {
  font-size: 0.32rem;
  color: #71777d;
  white-space: nowrap;
}
body #class-page-index nav .nav-list .nav-item .item-info .i-step span {
  white-space: nowrap;
}
body
  #class-page-index
  nav
  .nav-list
  .nav-item
  .item-info
  .i-step
  span:nth-child(2) {
  margin-left: 0.42666667rem;
  margin-right: 0.42666667rem;
  position: relative;
}
body
  #class-page-index
  nav
  .nav-list
  .nav-item
  .item-info
  .i-step
  span:nth-child(2)::before,
body
  #class-page-index
  nav
  .nav-list
  .nav-item
  .item-info
  .i-step
  span:nth-child(2)::after {
  content: "";
  border-radius: 50%;
  background: #71777d;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 0.06666667rem;
  width: 0.06666667rem;
}
body
  #class-page-index
  nav
  .nav-list
  .nav-item
  .item-info
  .i-step
  span:nth-child(2)::before {
  left: -0.26666667rem;
}
body
  #class-page-index
  nav
  .nav-list
  .nav-item
  .item-info
  .i-step
  span:nth-child(2)::after {
  right: -0.26666667rem;
}
body #class-page-index nav .nav-list .nav-item .item-icon {
  width: 2.13333333rem;
  height: 2.13333333rem;
  right: 0.53333333rem;
  top: 0.8rem;
  position: absolute;
  overflow: hidden;
}
body #class-page-index nav .nav-list .nav-item .item-icon img {
  width: 100%;
  height: 100%;
}
body #class-page-index .course-list {
  padding-left: 0.37333333rem;
  padding-top: 0.10666667rem;
  background-color: #fff;
}
body #class-page-index .course-list ul {
  background-color: #fff;
}
body #class-page-index .course-list ul li {
  float: left;
  margin-right: 0.18666667rem;
  width: 4.53333333rem;
  height: 5.01333333rem;
  background: url(/static/classwap/static/img/index/course_bg.png) no-repeat
    center center;
  background-size: cover;
  margin-bottom: 0.32rem;
}
body #class-page-index .course-list ul .course-card-top {
  position: relative;
  height: 1.92rem;
  width: 4.32rem;
  border-radius: 0.10666667rem;
  overflow: hidden;
  margin: auto;
}
body #class-page-index .course-list ul .course-card-top .course-banner {
  width: 100%;
  height: 100%;
}
body #class-page-index .course-list ul .course-card-top .course-rate {
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.85333333rem;
}
body #class-page-index .course-list ul .course-card-info {
  font-size: 10px;
  line-height: 0.32rem;
  color: #71777d;
  margin-top: 0.21333333rem;
}
[data-dpr="2"] body #class-page-index .course-list ul .course-card-info {
  font-size: 20px;
}
[data-dpr="2.5"] body #class-page-index .course-list ul .course-card-info {
  font-size: 25px;
}
[data-dpr="2.75"] body #class-page-index .course-list ul .course-card-info {
  font-size: 28px;
}
[data-dpr="3"] body #class-page-index .course-list ul .course-card-info {
  font-size: 30px;
}
[data-dpr="4"] body #class-page-index .course-list ul .course-card-info {
  font-size: 40px;
}
body #class-page-index .course-list ul .course-card-price {
  font-size: 12px;
  line-height: 0.37333333rem;
  margin-top: 0.21333333rem;
  color: #2b333b;
}
[data-dpr="2"] body #class-page-index .course-list ul .course-card-price {
  font-size: 24px;
}
[data-dpr="2.5"] body #class-page-index .course-list ul .course-card-price {
  font-size: 30px;
}
[data-dpr="2.75"] body #class-page-index .course-list ul .course-card-price {
  font-size: 33px;
}
[data-dpr="3"] body #class-page-index .course-list ul .course-card-price {
  font-size: 36px;
}
[data-dpr="4"] body #class-page-index .course-list ul .course-card-price {
  font-size: 48px;
}
body #class-page-index .course-list ul .course-card-price .now-price {
  margin-right: 0.21333333rem;
  font-size: 10px;
  line-height: 0.48rem;
}
[data-dpr="2"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .now-price {
  font-size: 20px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .now-price {
  font-size: 25px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .now-price {
  font-size: 28px;
}
[data-dpr="3"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .now-price {
  font-size: 30px;
}
[data-dpr="4"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .now-price {
  font-size: 40px;
}
body #class-page-index .course-list ul .course-card-price .now-price.red {
  color: #ff2d50;
}
body #class-page-index .course-list ul .course-card-price .student-price {
  border: 1px solid rgba(255, 45, 80, 0.2);
  border-radius: 0.05333333rem;
  border-width: 0.02666667rem;
  padding-top: 0.08rem;
  padding-bottom: 0.08rem;
  padding-left: 0.10666667rem;
  padding-right: 0.10666667rem;
  text-align: center;
  font-size: 10px;
  color: #ff2d50;
  line-height: 1;
}
[data-dpr="2"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .student-price {
  font-size: 20px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .student-price {
  font-size: 25px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .student-price {
  font-size: 28px;
}
[data-dpr="3"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .student-price {
  font-size: 30px;
}
[data-dpr="4"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .student-price {
  font-size: 40px;
}
body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .student-price
  .price-label {
  height: 0.26666667rem;
  line-height: 0.30666667rem;
}
body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .student-price
  .price {
  margin-left: 0.10666667rem;
  color: #2b333b;
}
body #class-page-index .course-list ul .course-card-price .origin-price {
  height: 0.48rem;
  font-size: 10px;
  color: #b7bbbf;
  line-height: 0.48rem;
  text-decoration: line-through;
}
[data-dpr="2"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .origin-price {
  font-size: 20px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .origin-price {
  font-size: 25px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .origin-price {
  font-size: 28px;
}
[data-dpr="3"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .origin-price {
  font-size: 30px;
}
[data-dpr="4"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .origin-price {
  font-size: 40px;
}
body #class-page-index .course-list ul .course-card-price .discount-label-box {
  margin-right: 0.21333333rem;
  border: 1px solid rgba(255, 45, 80, 0.2);
  border-radius: 0.05333333rem;
  border-width: 0.02666667rem;
  padding-top: 0.08rem;
  padding-bottom: 0.08rem;
  padding-left: 0.10666667rem;
  padding-right: 0.10666667rem;
  text-align: center;
  font-size: 10px;
  color: #f01414;
  line-height: 1;
}
[data-dpr="2"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .discount-label-box {
  font-size: 20px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .discount-label-box {
  font-size: 25px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .discount-label-box {
  font-size: 28px;
}
[data-dpr="3"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .discount-label-box {
  font-size: 30px;
}
[data-dpr="4"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .discount-label-box {
  font-size: 40px;
}
body
  #class-page-index
  .course-list
  ul
  .course-card-price
  .discount-label-box
  .price-label {
  height: 0.26666667rem;
  line-height: 0.30666667rem;
}
body #class-page-index .course-list ul .course-card-content {
  padding-left: 0.26666667rem;
  padding-right: 0.26666667rem;
  padding-top: 0.21333333rem;
  padding-bottom: 0.21333333rem;
}
body #class-page-index .course-list ul .course-card-content .course-card-name {
  font-size: 14px;
  line-height: 0.53333333rem;
  height: 1.06666667rem;
  color: #2b333b;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
[data-dpr="2"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-content
  .course-card-name {
  font-size: 28px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-content
  .course-card-name {
  font-size: 35px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-content
  .course-card-name {
  font-size: 39px;
}
[data-dpr="3"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-content
  .course-card-name {
  font-size: 42px;
}
[data-dpr="4"]
  body
  #class-page-index
  .course-list
  ul
  .course-card-content
  .course-card-name {
  font-size: 56px;
}
body #class-page-index .course-pic-list {
  display: flex;
  flex-flow: column;
}
body #class-page-index .course-pic-list img {
  width: 100%;
}
body #class-page-index .plan-type-list {
  position: relative;
  overflow: hidden;
}
body #class-page-index .plan-type-list .line-column {
  position: absolute;
  left: 0.77333333rem;
  width: 0.05333333rem;
  height: 100%;
  background-color: #d9dde1;
}
body #class-page-index .plan-type-list > div:not(.line-column) {
  padding-bottom: 0.96rem;
}
body #class-page-index .plan-type-list > div:nth-child(2) {
  padding-top: 0.85333333rem;
}
body #class-page-index .plan-type-list .plan-type-item {
  position: relative;
  z-index: 1;
  display: block;
  width: 8.72rem;
  padding-left: 0.66666667rem;
  box-sizing: border-box;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item.on
  .select-label
  i:before {
  content: "\e86c";
  color: #20cc85;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item.hasbuy
  .select-label
  i:before {
  content: "\e86c";
  color: #d9dde1;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-item-banner {
  color: #d9dde1;
  background-color: #b7bbbf;
  text-align: center;
  font-size: 0.32rem;
  line-height: 0.37333333rem;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-item-banner
  i {
  display: block;
  margin-top: 1.06666667rem;
  margin-bottom: 0.16rem;
  font-size: 0.53333333rem;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-item-box
  .plan-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
body #class-page-index .plan-type-list .plan-type-item.prepare .plan-step-list {
  white-space: nowrap;
  font-size: 0;
  overflow-x: auto;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item {
  position: relative;
  display: inline-block;
  font-size: 14px;
  width: 4rem;
  height: 1.22666667rem;
  line-height: 1.22666667rem;
  border-width: 0.02666667rem;
  border-style: solid;
  border-color: #d9dde1;
  border-radius: 0.10666667rem;
  margin-top: 0.42666667rem;
  color: #2b333b;
  box-sizing: border-box;
  padding-right: 1.09333333rem;
  padding-left: 0.32rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 0.21333333rem;
}
[data-dpr="2"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item {
  font-size: 28px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item {
  font-size: 35px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item {
  font-size: 39px;
}
[data-dpr="3"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item {
  font-size: 42px;
}
[data-dpr="4"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item {
  font-size: 56px;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item:last-child {
  margin-right: 0;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item
  span {
  position: absolute;
  font-size: 12px;
  line-height: 0.37333333rem;
  top: 0.26666667rem;
  right: 0.26666667rem;
  color: #b7bbbf;
}
[data-dpr="2"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item
  span {
  font-size: 24px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item
  span {
  font-size: 30px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item
  span {
  font-size: 33px;
}
[data-dpr="3"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item
  span {
  font-size: 36px;
}
[data-dpr="4"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item.prepare
  .plan-step-list
  .plan-step-item
  span {
  font-size: 48px;
}
body #class-page-index .plan-type-list .plan-type-item .step-tip {
  margin-bottom: 0.37333333rem;
  padding-left: 0.4rem;
  font-size: 0.37333333rem;
  line-height: 0.42666667rem;
  color: #71777d;
  letter-spacing: 0;
  text-align: left;
}
body #class-page-index .plan-type-list .plan-type-item a {
  display: block;
  width: 8.74666667rem;
  height: 3.2rem;
  border-radius: 0.21333333rem;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
}
body #class-page-index .plan-type-list .plan-type-item a .plan-item-banner {
  height: 100%;
  width: 1.6rem;
  border-top-left-radius: 0.21333333rem;
  border-bottom-left-radius: 0.21333333rem;
  background-size: auto 100% !important;
  position: relative;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-banner
  .play-btn {
  width: 0.66666667rem;
  height: 0.66666667rem;
  text-align: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-banner
  .play-btn
  i {
  line-height: 0.66666667rem;
  font-size: 0.58666667rem;
  color: #fff;
}
body #class-page-index .plan-type-list .plan-type-item a .plan-item-box {
  height: 100%;
  width: 7.14666667rem;
  padding: 0.42666667rem;
  padding-top: 0.32rem;
  border-top-right-radius: 0.21333333rem;
  border-bottom-right-radius: 0.21333333rem;
  box-sizing: border-box;
  color: #2b333b;
  background-color: #fff;
  position: relative;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-name {
  font-size: 0.42666667rem;
  line-height: 0.64rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-weight: 700;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-center {
  margin-top: 0.26666667rem;
  font-size: 12px;
  line-height: 0.37333333rem;
  color: #71777d;
}
[data-dpr="2"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-center {
  font-size: 24px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-center {
  font-size: 30px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-center {
  font-size: 33px;
}
[data-dpr="3"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-center {
  font-size: 36px;
}
[data-dpr="4"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-center {
  font-size: 48px;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom {
  margin-top: 0.18666667rem;
  font-size: 14px;
  line-height: 0.42666667rem;
}
[data-dpr="2"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom {
  font-size: 28px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom {
  font-size: 35px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom {
  font-size: 39px;
}
[data-dpr="3"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom {
  font-size: 42px;
}
[data-dpr="4"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom {
  font-size: 56px;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  > span {
  font-size: 0.32rem;
  color: #71777d;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  i {
  margin-right: 0.13333333rem;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  .plan-discount-box {
  line-height: 0.48rem;
  border-radius: 0.05333333rem;
  border: 1px solid #f01414;
  padding-left: 0.10666667rem;
  padding-right: 0.10666667rem;
  font-size: 10px;
}
[data-dpr="2"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  .plan-discount-box {
  font-size: 20px;
}
[data-dpr="2.5"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  .plan-discount-box {
  font-size: 25px;
}
[data-dpr="2.75"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  .plan-discount-box {
  font-size: 28px;
}
[data-dpr="3"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  .plan-discount-box {
  font-size: 30px;
}
[data-dpr="4"]
  body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  .plan-discount-box {
  font-size: 40px;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-bottom
  .plan-discount-box
  .plan-discount-name {
  color: #f01414;
  margin-right: 0.13333333rem;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment {
  display: flex;
  align-items: center;
  margin-top: 0.13333333rem;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment
  .item-price {
  font-size: 0.34666667rem;
  line-height: 0.42666667rem;
  color: #2b333b;
  text-align: left;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment
  .comment-wrap {
  margin-left: 0.18666667rem;
  display: flex;
  align-items: baseline;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment
  .comment-wrap
  .comment-star {
  display: flex;
  font-size: 0.29333333rem;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment
  .comment-wrap
  .comment-star
  i {
  margin-right: 0.10666667rem;
  color: #b7bbbf;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment
  .comment-wrap
  .comment-star
  i.on {
  color: #ffa01e;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment
  .comment-wrap
  .comment-score {
  font-size: 0.32rem;
  color: #71777d;
  white-space: nowrap;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment
  .item-details {
  display: block;
  color: #9447eb;
  text-align: left;
  font-weight: 700;
  margin-left: 0.74666667rem;
  font-size: 0.32rem;
  white-space: nowrap;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .plan-item-comment
  .item-details
  i {
  font-size: 0.4rem;
  vertical-align: text-top;
}
body
  #class-page-index
  .plan-type-list
  .plan-type-item
  a
  .plan-item-box
  .play-btn {
  position: absolute;
  right: 0.42666667rem;
  bottom: 0.42666667rem;
  display: block;
  width: 1.65333333rem;
  height: 0.8rem;
  background: url(/static/classwap/static/img/index/play@2x.png) center
    no-repeat;
  background-size: 100%;
}
body #class-page-index .plan-final {
  padding-bottom: 2.8rem;
  position: relative;
}
body #class-page-index .plan-final .line-column {
  position: absolute;
  left: 0.77333333rem;
  width: 0.05333333rem;
  height: 100%;
  background-color: #d9dde1;
}
body #class-page-index .plan-final .plan-final-tit {
  display: inline-flex;
  font-size: 16px;
  color: #fff;
  line-height: 0.48rem;
  text-align: center;
  padding-top: 0.42666667rem;
  padding-bottom: 0.42666667rem;
  padding-left: 0.66666667rem;
  box-sizing: border-box;
  background-size: 100%;
  position: relative;
  z-index: 1;
  background: #f3f5f7;
}
[data-dpr="2"] body #class-page-index .plan-final .plan-final-tit {
  font-size: 32px;
}
[data-dpr="2.5"] body #class-page-index .plan-final .plan-final-tit {
  font-size: 40px;
}
[data-dpr="2.75"] body #class-page-index .plan-final .plan-final-tit {
  font-size: 44px;
}
[data-dpr="3"] body #class-page-index .plan-final .plan-final-tit {
  font-size: 48px;
}
[data-dpr="4"] body #class-page-index .plan-final .plan-final-tit {
  font-size: 64px;
}
body #class-page-index .plan-final .plan-final-tit p {
  font-size: 0.37333333rem;
  line-height: 0.48rem;
  padding-left: 0.16rem;
  color: #71777d;
  letter-spacing: 0;
  text-align: left;
}
body #class-page-index .plan-final .plan-final-list {
  color: #71777d;
  font-size: 14px;
  line-height: 0.42666667rem;
  padding-left: 1.22666667rem;
  padding-right: 0.42666667rem;
}
[data-dpr="2"] body #class-page-index .plan-final .plan-final-list {
  font-size: 28px;
}
[data-dpr="2.5"] body #class-page-index .plan-final .plan-final-list {
  font-size: 35px;
}
[data-dpr="2.75"] body #class-page-index .plan-final .plan-final-list {
  font-size: 39px;
}
[data-dpr="3"] body #class-page-index .plan-final .plan-final-list {
  font-size: 42px;
}
[data-dpr="4"] body #class-page-index .plan-final .plan-final-list {
  font-size: 56px;
}
body #class-page-index .plan-final .plan-final-list dd {
  float: left;
  width: 49%;
  margin-bottom: 0.42666667rem;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #class-page-index .plan-final .plan-final-list dd:nth-child(odd) {
  margin-right: 2%;
}
body #class-page-index .plan-final .plan-final-list i {
  font-size: 12px;
  margin-right: 0.21333333rem;
  font-weight: 700;
  color: #20cc85;
}
[data-dpr="2"] body #class-page-index .plan-final .plan-final-list i {
  font-size: 24px;
}
[data-dpr="2.5"] body #class-page-index .plan-final .plan-final-list i {
  font-size: 30px;
}
[data-dpr="2.75"] body #class-page-index .plan-final .plan-final-list i {
  font-size: 33px;
}
[data-dpr="3"] body #class-page-index .plan-final .plan-final-list i {
  font-size: 36px;
}
[data-dpr="4"] body #class-page-index .plan-final .plan-final-list i {
  font-size: 48px;
}
body #class-page-index .plan-final .plan-final-desc {
  color: #71777d;
  font-size: 12px;
  line-height: 0.48rem;
  padding-left: 1.22666667rem;
  padding-right: 0.85333333rem;
  text-align: justify;
}
[data-dpr="2"] body #class-page-index .plan-final .plan-final-desc {
  font-size: 24px;
}
[data-dpr="2.5"] body #class-page-index .plan-final .plan-final-desc {
  font-size: 30px;
}
[data-dpr="2.75"] body #class-page-index .plan-final .plan-final-desc {
  font-size: 33px;
}
[data-dpr="3"] body #class-page-index .plan-final .plan-final-desc {
  font-size: 36px;
}
[data-dpr="4"] body #class-page-index .plan-final .plan-final-desc {
  font-size: 48px;
}
body #class-page-index .footer-container {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.30666667rem;
  background: #2b333b;
  box-sizing: border-box;
}
body #class-page-index .footer-container .step-select {
  width: 7.54666667rem;
  height: 100%;
  display: flex;
}
body #class-page-index .footer-container .step-select .plan-type-item {
  width: 25%;
  height: 100%;
  position: relative;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.37333333rem;
}
body
  #class-page-index
  .footer-container
  .step-select
  .plan-type-item
  .step-title {
  height: 100%;
  padding-top: 0.42666667rem;
  box-sizing: border-box;
  position: relative;
}
body
  #class-page-index
  .footer-container
  .step-select
  .plan-type-item
  .step-title::after {
  content: "+";
  font-size: 0.48rem;
  right: -0.13333333rem;
  line-height: 1.15;
  color: #71777d;
  position: absolute;
}
body #class-page-index .footer-container .step-select .plan-type-item i {
  position: absolute;
  display: none;
  color: #fff;
  font-size: 0.37333333rem;
  right: 0.13333333rem;
  top: 0.10666667rem;
}
body #class-page-index .footer-container .step-select .plan-type-item .hasbuy {
  border-radius: 0.18666667rem;
  font-size: 0.21333333rem;
  padding-top: 0.02666667rem;
  padding-bottom: 0.02666667rem;
  padding-left: 0.13333333rem;
  padding-right: 0.13333333rem;
  right: 0.13333333rem;
  top: 0.10666667rem;
  position: absolute;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.17);
  text-align: center;
  font-weight: 700;
  color: #2b333b;
}
body #class-page-index .footer-container .step-select .plan-type-item.on {
  color: #fff;
}
body #class-page-index .footer-container .step-select .plan-type-item.on i {
  display: inline;
}
body
  #class-page-index
  .footer-container
  .step-select
  .plan-type-item:last-child
  .step-title::after {
  display: none;
}
body #class-page-index .footer-container .price-box {
  display: inline-flex;
  flex-flow: column;
  width: 2.02666667rem;
  padding-top: 0.32rem;
  padding-bottom: 0.21333333rem;
  color: #ff2d50;
  letter-spacing: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
body #class-page-index .footer-container .price-box .package-price-box {
  font-size: 0.37333333rem;
  line-height: 0.48rem;
  color: #2b333b;
}
body
  #class-page-index
  .footer-container
  .price-box
  .package-price-box
  .package-price-text {
  font-size: 0.42666667rem;
  color: #f01414;
}
body
  #class-page-index
  .footer-container
  .price-box
  .package-price-box
  .reduce-price-text {
  margin-left: 0.21333333rem;
  font-size: 0.32rem;
  line-height: 0.37333333rem;
  color: #f9a8a8;
}
body #class-page-index .footer-container .price-box .select-total-price {
  line-height: 0.48rem;
  font-size: 0.48rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
body
  #class-page-index
  .footer-container
  .price-box
  .select-total-price
  .select-reduce-price {
  margin-left: 0.21333333rem;
  font-size: 0.26666667rem;
  line-height: 0.37333333rem;
  color: #71777d;
}
body #class-page-index .footer-container .price-box .bottom-tips {
  line-height: 0.26666667rem;
}
body #class-page-index .footer-container .price-box .bottom-tips .buyb-tips {
  font-size: 0.26666667rem;
  color: #71777d;
}
body #class-page-index .footer-container .price-box .bottom-tips .buyb-tips i {
  display: inline-block;
  width: 0.26666667rem;
  height: 0.26666667rem;
  margin-right: 0.05333333rem;
  background: url(/static/classwap/static/img/course/pay_icon.png) center
    no-repeat;
  background-size: cover;
  vertical-align: middle;
}
body
  #class-page-index
  .footer-container
  .price-box
  .bottom-tips
  .package-normal-price {
  line-height: 0.26666667rem;
  font-size: 0.26666667rem;
  color: #b7bbbf;
  text-decoration: line-through;
  vertical-align: bottom;
}
body #class-page-index .footer-container .buy-btn {
  color: #fff;
  background: #9447eb;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.17);
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 20px 0 0;
  width: 2.45333333rem;
  font-size: 16px;
  text-align: center;
}
[data-dpr="2"] body #class-page-index .footer-container .buy-btn {
  font-size: 32px;
}
[data-dpr="2.5"] body #class-page-index .footer-container .buy-btn {
  font-size: 40px;
}
[data-dpr="2.75"] body #class-page-index .footer-container .buy-btn {
  font-size: 44px;
}
[data-dpr="3"] body #class-page-index .footer-container .buy-btn {
  font-size: 48px;
}
[data-dpr="4"] body #class-page-index .footer-container .buy-btn {
  font-size: 64px;
}
body #class-page-index .footer-container .buy-btn .buy-text {
  height: 1.06666667rem;
  line-height: 1.06666667rem;
  font-size: 0.37333333rem;
}
body #class-page-index .footer-container .buy-btn .price-discount {
  padding-top: 0.10666667rem;
  padding-right: 0.10666667rem;
  padding-bottom: 0.10666667rem;
  padding-left: 0.10666667rem;
  font-size: 0.21333333rem;
  border-radius: 0.05333333rem;
  line-height: 1;
  color: #fff;
  background: #ffa01e;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
}
body #class-page-index .footer-container .buy-btn.disabled {
  background-color: #b7bbbf;
}
body #class-page-index .footer-container .discount-tip {
  padding-top: 0.10666667rem;
  padding-right: 0.29333333rem;
  padding-bottom: 0.10666667rem;
  padding-left: 0.29333333rem;
  border-radius: 0.37333333rem;
  font-size: 0.32rem;
  top: -0.16rem;
  left: 50%;
  display: inline-block;
  transform: translate(-50%, -100%);
  background: #363d45;
  color: #fff;
  text-align: center;
  position: absolute;
}
body #class-page-index .footer-container .discount-tip::after {
  content: "";
  width: 1px;
  height: 1px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(92%, -50%);
  border-style: solid;
  border-color: transparent transparent transparent #363d45;
  border-width: 0.16rem;
}
body #class-page-index .footer-package-list {
  position: fixed;
  z-index: 1;
  bottom: 1.30666667rem;
  left: 0;
  width: 100%;
  height: 1.6rem;
  padding-left: 0.53333333rem;
  background-color: #fff;
}
body #class-page-index .footer-package-list .package-text {
  display: inline-block;
  float: left;
  margin-right: 0.42666667rem;
  margin-top: 0.32rem;
  font-size: 0.37333333rem;
  line-height: 0.48rem;
  color: #f01414;
}
body #class-page-index .footer-package-list .package-list {
  margin-top: 0.26666667rem;
  padding-right: 0.93333333rem;
  white-space: nowrap;
  font-size: 0;
  overflow-x: auto;
}
body #class-page-index .footer-package-list .package-list .package-item {
  display: inline-block;
  width: 2.08rem;
  height: 1.06666667rem;
  margin-right: 0.21333333rem;
  padding-left: 0.26666667rem;
  padding-top: 0.13333333rem;
  border-radius: 0.10666667rem;
  border-width: 0.02666667rem;
  border-style: solid;
  border-color: #b7bbbf;
  box-sizing: border-box;
}
body
  #class-page-index
  .footer-package-list
  .package-list
  .package-item:last-child {
  margin-right: 0;
}
body
  #class-page-index
  .footer-package-list
  .package-list
  .package-item
  p:first-child {
  margin-bottom: 0.08rem;
  font-size: 0.32rem;
  line-height: 0.37333333rem;
  color: #2b333b;
}
body
  #class-page-index
  .footer-package-list
  .package-list
  .package-item
  p:nth-child(2) {
  font-size: 0.26666667rem;
  line-height: 0.32rem;
  color: #71777d;
}
body #class-page-index .package-list-layer {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
body #class-page-index .package-list-layer .footer-list-detail {
  position: absolute;
  z-index: 3;
  bottom: 1.30666667rem;
  left: 0;
  width: 100%;
  padding-left: 0.53333333rem;
  padding-right: 0.53333333rem;
  max-height: 11.33333333rem;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #f3f5f7;
}
body #class-page-index .package-list-layer .footer-list-detail .footer-head {
  position: fixed;
  z-index: 4;
  width: 8.93333333rem;
  padding-top: 0.53333333rem;
  padding-bottom: 0.26666667rem;
  background: #f3f5f7;
}
body #class-page-index .package-list-layer .footer-list-detail .footer-head p {
  float: left;
  font-size: 0.42666667rem;
  line-height: 0.48rem;
  color: #2b333b;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .footer-head
  .close-icon {
  float: right;
  margin-top: -0.13333333rem;
  font-size: 0.53333333rem;
  font-weight: 700;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list {
  margin-top: 0.8rem;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item {
  padding-top: 0.58666667rem;
  padding-bottom: 0.32rem;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  > p {
  margin-bottom: 0.4rem;
  padding-left: 0.61333333rem;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  > p
  span {
  margin-left: 0.21333333rem;
  font-size: 0.26666667rem;
  line-height: 0.32rem;
  color: #b7bbbf;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item.on
  .select-label
  i:before {
  content: "\e86c";
  color: #20cc85;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item.hasbuy
  .select-label
  i:before {
  content: "\e86c";
  color: #d9dde1;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .select-label {
  color: #f01414;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .select-label
  i {
  top: 0.02666667rem;
  left: -0.61333333rem;
  font-size: 0.46666667rem;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list {
  white-space: nowrap;
  font-size: 0;
  overflow-x: auto;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list
  a {
  display: inline-block;
  margin-right: 0.21333333rem;
  width: 5.33333333rem;
  height: 1.73333333rem;
  padding: 0.26666667rem;
  border-radius: 0.10666667rem;
  box-sizing: border-box;
  background-color: #fff;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list
  a
  img {
  float: left;
  width: 2.13333333rem;
  height: 1.2rem;
  border-radius: 0.10666667rem;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list
  a
  p {
  float: left;
  margin-left: 0.26666667rem;
  width: 2.34666667rem;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.32rem;
  color: #2b333b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list
  .add-icon {
  display: inline-block;
  margin-right: 0.21333333rem;
  height: 1.73333333rem;
  line-height: 1.73333333rem;
  font-size: 0.53333333rem;
  font-weight: 700;
  font-style: normal;
  color: #b7bbbf;
  vertical-align: text-bottom;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list
  .package-price {
  display: inline-block;
  line-height: 0.42666667rem;
  font-size: 0.29333333rem;
  color: #07111b;
  text-align: center;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list
  .package-price
  .sale-price {
  font-size: 0.42666667rem;
  line-height: 0.58666667rem;
  color: #f01414;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list
  .package-price
  .normal-price {
  color: #93999f;
  text-decoration: line-through;
}
body
  #class-page-index
  .package-list-layer
  .footer-list-detail
  .package-plan-list
  .package-plan-item
  .package-plan-list
  .package-price
  .reduce-price {
  margin-top: 0.02666667rem;
  color: #f01414;
}
@media screen and (max-device-width: 362px) {
  body
    #class-page-index
    .course-list
    ul
    .course-card-price
    .discount-label-box {
    padding: 0.01333333rem;
    margin-right: 0;
  }
  body #class-page-index .course-list ul .course-card-price .now-price {
    margin-right: 0;
  }
  body #class-page-index .course-list ul .course-card-price .student-price {
    padding-left: 0;
    padding-right: 0;
  }
}
</style>

